<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#myCanvas{
	background-color:#CCC;
	border:solid thin  #666;
	cursor:none;
}
</style>
</head>

<body>
<canvas id="myCanvas" width="640" height="480"></canvas>
</body>
</html>

<script language="javascript">
	window.onload = function()
	{	
		var screenWidth = 640;
		var screenHeight = 480;		
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");	
		var m = new Array();
		var loseTime = 10;
		var loseTick = 0;
		var fps = 10;
		
		var mousestate = "mouseup";
		var mousex = null;
		var mousey = null;	
		var level = 10;
		var minlv = 0;
		
		var points = 0;
		
		var mm = new Array();
		
		for ( var i = 0; i < 10; i++)
		{
			mm[i] = new objEnemy(Math.random() * screenWidth, Math.random() * screenHeight, Math.random() * 10, Math.random() * 10);
		}
		

		setInterval(mainLoop, fps);
		
		
		function mainLoop()
		{	
			loseTicker();
			// Clear Screen			
			context.clearRect(0, 0, screenWidth, screenHeight);										
			
			context.fillText( "Example: HTML5 Test Boxes", 20 , 20 );						
			context.fillText( "Mouse X: " + mousex, 20, 40 );
			context.fillText( "Mouse Y: " + mousey, 20, 60 );
			context.fillText( "Mouse State: " + mousestate, 20, 80 );
			context.fillText( "Points: " + points, 20, 100 );
			context.fillText( "Tick: " + loseTime, 20, 120 );			
	
			radar(mousex, mousey);
			
			for ( var i = 0; i < mm.length; i++)
			{
				mm[i].draw();
				mm[i].tick();
			}

		}		
		
		
		// Mouse Event
		canvas.onmousemove = function(e)
		{
			mousex = e.layerX - canvas.offsetLeft;
			mousey = e.layerY - canvas.offsetTop;
		}
		
		canvas.onmousedown = function(e)
		{
			mousestate = "mousedown";
		}
		
		canvas.onmouseup = function(e)
		{
			mousestate = "mouseup";
		}
		
		// Object
		function radar( x, y)
		{
			context.beginPath();
			context.arc( x, y, 20, 2 * Math.PI, false);									
			context.closePath();
			context.stroke();
			context.beginPath();
			context.moveTo(x - 5, y );
			context.lineTo(x + 5, y );
			context.moveTo(x, y - 5 );
			context.lineTo(x, y + 5 );
			context.closePath();
			context.stroke();
		}
		
		function objEnemy(x, y , spx, spy)
		{
			this.x = x;
			this.y = y;
			this.live = true;
			this.times = 0;
			this.pawnTime = 30;		
			this.spx = spx;
			this.spy = spy;
			
			
			this.draw = function()
			{
				if ( this.live == true )
				{
					context.beginPath();
					context.rect( this.x, this.y , 25, 25 );
					context.closePath();
					context.stroke();			
				}
			}
			
			this.tick = function()
			{
				if ( this.live == true ){					
					// Run				
					this.move();
					
					if ( mousex > this.x && mousex < this.x + 100 && mousey > this.y && mousey < this.y + 100 && mousestate == "mousedown")
					{
						this.live = false;
						points++;
						loseTime = loseTime + 3;
						mousestate = "mouseup";
					}
				}
				else{
					this.times++;
					
					if ( this.times > 100 )
					{						
						this.rePawn();
					}
				}
			
			}
			
			this.rePawn = function()
			{
				level++;
				minlv++;
				this.x = Math.random() * (screenWidth - 25) + 25 ;
				this.y = Math.random() * (screenHeight - 25) + 25;
				this.live = true;
				this.times = 0;
				this.spx = Math.random() * (level - minlv) + minlv;
				this.spy = Math.random() * (level - minlv) + minlv;
			}
			
			this.move = function()
			{
				this.x = this.x + spx;
				this.y = this.y + spy;
				
				if ( this.x < 0 || (this.x + 25) > screenWidth )
				{
					spx = spx * (-1);
				}
				
				if ( this.y < 0 || (this.y + 25) > screenHeight )
				{
					spy = spy * (-1);
				}
			}
			
			
			
		}
		
		function loseTicker()
			{
				loseTick = loseTick + 1;
				
				if ( loseTick > 100 )
				{
					loseTick = 0;
					loseTime = loseTime - 1;
					
					if ( loseTime < 0 )
					{
						fps = 0;
					}
				}
			}
				
	}
	
	
</script>
